<!-- 机构认证(上传营业执照、机构法人证件照正反面) -->
<template>
  <el-dialog
    class="gl_dialog_TitleLine"
    width="980px"
    title="机构认证"
    :append-to-body="true"
    :visible.sync="dialogVisible"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form ref="createDelegationInput" :model="createDelegationInput" :rules="createDelegationInput_Rules" label-width="110px">
      <el-row>
        <div class="img_box">
          <el-form-item label="机构认证" prop="licenseImage" style="width:354px">
            <el-input v-model="createDelegationInput.licenseImage" style="display: none" />
            <el-upload class="imgt_upload" accept=".jpg,.png,.jpeg" :action="action" :show-file-list="false" :limit="1" :before-upload="beforeUpload1" :http-request="upload1" :auto-upload="true">
              <div v-if="createDelegationInput.licenseImage">
                <img :src="getStaticFileUrl(createDelegationInput.licenseImage)" class="imgt">
              </div>
              <div v-else class="img_content">
                <div><i class="el-icon-plus imgt-icon" /></div>
                <p>机构营业执照</p>
              </div>
            </el-upload>
          </el-form-item>
        </div>
        <div class="img_box">
          <el-form-item label="" prop="idCardImage" label-width="20px">
            <el-input v-model="createDelegationInput.idCardImage" style="display: none" />
            <el-upload class="imgt_upload" accept=".jpg,.png,.jpeg" :action="action" :show-file-list="false" :limit="1" :before-upload="beforeUpload2" :http-request="upload2" :auto-upload="true">
              <div v-if="createDelegationInput.idCardImage">
                <img :src="getStaticFileUrl(createDelegationInput.idCardImage)" class="imgt">
              </div>
              <div v-else class="img_content">
                <div><i class="el-icon-plus imgt-icon" /></div>
                <p>机构法人证件照正面</p>
              </div>
            </el-upload>
          </el-form-item>
        </div>
        <div class="img_box">
          <el-form-item label="" prop="idCardBackImage" label-width="20px">
            <el-input v-model="createDelegationInput.idCardBackImage" style="display: none" />
            <el-upload class="imgt_upload" accept=".jpg,.png,.jpeg" :action="action" :show-file-list="false" :limit="1" :before-upload="beforeUpload3" :http-request="upload3" :auto-upload="true">
              <div v-if="createDelegationInput.idCardBackImage">
                <img :src="getStaticFileUrl(createDelegationInput.idCardBackImage)" class="imgt">
              </div>
              <div v-else class="img_content">
                <div><i class="el-icon-plus imgt-icon" /></div>
                <p>机构法人证件照反面</p>
              </div>
            </el-upload>
          </el-form-item>
        </div>
      </el-row>
    </el-form>
    <el-row class="gl_mt_15">
      <el-col :span="24" align="right">
        <el-button type="default" size="mini" @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" size="mini" @click="submit()">确定</el-button>
      </el-col>
    </el-row>
  </el-dialog>
</template>
<script>
import { getToken } from '@/lib/auth';
import validator from '@/lib/validate/index.js';
import axios from 'axios';
import {
  api_PUT_EventsManagementDelegationId
} from '@/extend/api/gameswaggerApi/app.js';
export default {
  name: 'Authentication',
  props: {
    createDelegationInput: {
      required: true,
      type: Object,
      default() {
        return {
          licenseImage: '',
          idCardImage: '',
          idCardBackImage: ''
        };
      }
    },
    delegationId: {
      // required: true,
      type: String,
      default: ''
    }
  },
  data() {
    return {
      action: `${WEB_CONFIG.VUE_APP_STATIC_FILE_RUL}/api/upload/image`,
      dialogVisible: false,
      tokenInfo: getToken(),
      file1: '',
      file2: '',
      file3: '',
      createDelegationInput_Rules: {
        licenseImage: [
          validator.required('请上传机构营业执照')
        ],
        idCardImage: [
          validator.required('请上传机构法人证件照正面')
        ],
        idCardBackImage: [
          validator.required('请上传机构法人证件照反面')
        ]
      }
    };
  },
  methods: {
    openAuthentication() {
      this.dialogVisible = true;
    },
    // 上传图片限制
    check(file) {
      const isJPG = (file.type === 'image/jpeg' || file.type === 'image/png');
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isJPG) {
        this.$message.error('上传图片只能是 JPG或者PNG 格式!');
      }
      if (!isLt2M) {
        this.$message.error('图片大小不能超过 2MB!');
      }
      return isJPG && isLt2M;
    },
    beforeUpload1(file) {
      this.check(file);
      this.file1 = file;
    },
    // 上传图片
    upload1() {
      return new Promise((resolve, reject) => {
        if (!this.file1) reject(new Error());
        const form = new FormData();
        form.append('formFile', this.file1);
        this.uploadApi(this.action, form).then(res => {
          if (res.status === 200) {
            this.$set(this.createDelegationInput, 'licenseImage', res.data.tempUrl);
            resolve(res.data);
          } else {
            reject(res.data);
          }
        });
      });
    },
    beforeUpload2(file) {
      this.check(file);
      this.file2 = file;
    },
    // 上传图片
    upload2() {
      return new Promise((resolve, reject) => {
        if (!this.file2) reject(new Error());
        const form = new FormData();
        form.append('formFile', this.file2);
        this.uploadApi(this.action, form).then(res => {
          if (res.status === 200) {
            this.$set(this.createDelegationInput, 'idCardImage', res.data.tempUrl);
            resolve(res.data);
          } else {
            reject(res.data);
          }
        });
      });
    },
    beforeUpload3(file) {
      this.check(file);
      this.file3 = file;
    },
    upload3() {
      return new Promise((resolve, reject) => {
        if (!this.file3) reject(new Error());
        const form = new FormData();
        form.append('formFile', this.file3);
        this.uploadApi(this.action, form).then(res => {
          if (res.status === 200) {
            this.$set(this.createDelegationInput, 'idCardBackImage', res.data.tempUrl);
            resolve(res.data);
          } else {
            reject(res.data);
          }
        });
      });
    },
    // 上传图片的api
    uploadApi(url, file) {
      const config = {
        headers: {
          Authorization: 'Bearer ' + this.tokenInfo
        }
      };
      return axios.post(url, file, config);
    },
    // 进行机构认证
    submit() {
      var that = this;
      const id = this.delegationId ? this.delegationId : this.$route.query.id;
      this.$refs['createDelegationInput'].validate((valid) => {
        if (valid) {
          that.createDelegationInput.isApproved = null;
          api_PUT_EventsManagementDelegationId(id, that.createDelegationInput).then(res => {
            that.$message({
              type: 'success',
              message: '上传成功'
            });
            that.dialogVisible = false;
            that.$parent.getGroup();
          }).catch(() => {
            that.dialogVisible = false;
          });
        }
      });
    },
    // 上传图片回显
    getStaticFileUrl(relativeUrl) {
      if (!relativeUrl) return '';
      return WEB_CONFIG.VUE_APP_STATIC_FILE_RUL + relativeUrl;
    }
  }
};
</script>
<style scoped>
.img_box {
  float: left;
}
.imgt_upload {
  width: 240px;
  height: 150px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  overflow: hidden;
}
.imgt_upload:hover {
  border-color: #409EFF;
}
.img_content {
  width: 240px;
  height: 90px;
  margin-top: 30px;
  text-align: center;
}
.imgt-icon {
  font-size: 28px;
  color: #8c939d;
}
.imgt {
  width: 240px;
  height: 150px;
  display: block;
}
</style>
